<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品详情 - 广州桦霖气体有限公司</title>
  <link rel="stylesheet" href="assets/css/common.css">
  <script src="assets/js/common.js"></script>
  <style>
    .product-detail-img {
      width: 100%;
      height: 400px;
      object-fit: cover;
      border-radius: 12px;
      margin-bottom: 2rem;
    }
    
    .specs-table {
      width: 100%;
      border-collapse: collapse;
      margin: 1rem 0;
    }
    
    .specs-table th,
    .specs-table td {
      border: 1px solid #ddd;
      padding: 0.8rem;
      text-align: left;
    }
    
    .specs-table th {
      background-color: #f8f9fa;
      font-weight: bold;
    }
    
    @media (max-width: 768px) {
      .product-detail-img {
        height: 250px;
      }
      
      .specs-table {
        font-size: 0.9rem;
      }
      
      .specs-table th,
      .specs-table td {
        padding: 0.5rem;
      }
    }
  </style>
</head>
<body>
  <header id="header"></header>

  <main>
    <section class="hero">
      <div class="container hero-content">
        <h1>产品详情</h1>
        <p>深入了解我们的气体产品</p>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <div class="product-detail" id="productDetail">
          <img v-if="product" :src="'./assets/images/product/' + product.path" :alt="product.name" class="product-detail-img">
          <h2 v-if="product">{{ product.name }}</h2>
          <p v-if="product" class="product-price">{{ product.price }}</p>
          
          <div v-if="product">
            <h3>产品特点</h3>
            <ul>
              <li v-for="(feature, index) in product.feat" :key="index">{{ feature }}</li>
            </ul>
            
            <h3>技术参数</h3>
            <table class="specs-table">
              <tr v-for="(spec, index) in product.spec" :key="index">
                <th>{{ spec[0] }}</th>
                <td>{{ spec[1] }}</td>
              </tr>
            </table>
            
            <h3>应用场景</h3>
            <p>
              <span v-for="(app, index) in product.app" :key="index">
                {{ app }}<span v-if="index < product.app.length - 1">、</span>
              </span>
            </p>
            
            <div class="margin-top-2 text-center">
              <a href="contact.html" class="btn">立即咨询</a>
              <a href="products.html" class="btn-small" style="margin-left: 1rem;">返回列表</a>
            </div>
          </div>
          
          <div v-else>
            <p>产品未找到</p>
            <a href="products.html" class="btn-small">返回产品列表</a>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer id="footer"></footer>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="assets/js/data.js"></script>
  <script>
    const { createApp, ref, onMounted } = Vue;
    
    createApp({
      setup() {
        const product = ref(null);
        
        onMounted(() => {
          // 创建导航
          document.getElementById('header').innerHTML = createNav('products');
          document.getElementById('footer').innerHTML = createFooter();
          
          // 获取产品ID
          const urlParams = new URLSearchParams(window.location.search);
          const productId = urlParams.get('id');
          
          // 查找产品
          if (productId) {
            product.value = products.find(p => p.id === productId);
          }
        });
        
        return {
          product
        };
      }
    }).mount('#productDetail');
  </script>
</body>
</html>